class Detail {
    constructor() {
        this.btn_D();
        //放大镜 划入划出事件
        this.overFn()
        this.moveFn()
        //循环绑定点击事件
        this.onCheck()
    }
    //绑定点击事件
    btn_D() {
        //利用事件委托绑定点击事件
        this.$('.detail_tab_list').addEventListener('click', this.ulD.bind(this))
        //给评论按钮绑定一个点击事件
        this.$('.btnS').addEventListener('click', this.obServer.bind(this))
        //给小左按钮绑定点击事件
        this.$('.arrow_prev').onclick = this.leftP.bind(this)
        //给小按钮的有按钮绑定一个点击事件
        this.$('.arrow_next').onclick = this.rightP.bind(this)

    }
    //li的点击事件
    ulD(eve) {
        if (eve.target.nodeName != 'LI') return;
        document.querySelector('.detail_tab_list .current').className = ''
        // console.log(eve.target);
        let res = eve.target
        if (res) {
            res.className = 'current'
            //console.log(res);
            this.hideN(res)
        }
    }
    //事件的隐藏
    hideN(res) {
        this.$('.detail_tab_con div').className = '';
        //console.log(res.innerHTML);
        if (res.innerHTML == '商品介绍') {
            this.$('.item')[1].className = 'item'
            this.$('.item')[0].className = 'item LL'
            this.$('.item')[2].className = 'item'
        }
        if (res.innerHTML == '规格与包装') {
            this.$('.item')[0].className = 'item'
            this.$('.item')[1].className = 'item LL'
            this.$('.item')[2].className = 'item'
        }
        if (res.innerHTML == '商品评价（50000）') {
            this.$('.item')[0].className = 'item'
            this.$('.item')[2].className = 'item LL'
            this.$('.item')[1].className = 'item'
        }

    }
    //添加评论
    obServer() {
        //获取文本框的内容
        let tet = this.$('.inS').value
        //console.log(tet);
        //非空验证 
        if (!tet) return;
        //创建一个元素
        let li = document.createElement('li')
        li = `<li>
           <a href="#"></a>
           <div class="comment-main-r">
              <div class="main-top">
                b***1 (匿名) 评论于 2015年11月02日 17:46
             </div>
             <div class="main-bd">
               ${tet}
            </div>
        </div>
    </li>`;
        $(".comment-main").prepend(li)
    }

    //放大镜的实现
    overFn() {
        this.$('.preview_img').onmouseover = () => {
            this.$('.mask').style.display = 'block'
            this.$('.big').style.display = 'block'
        }
        this.$('.preview_img').onmouseout = () => {
            this.$('.mask').style.display = 'none'
            this.$('.big').style.display = 'none'
        }
    }
    moveFn() {
        this.$('.preview_img').onmousemove = (e) => {
            // 2.2 在事件处理函数中, 获取到鼠标在可视区的坐标
            let cX = e.pageX
            let cY = e.pageY
            //console.log(cX, cY);
            //获取放大镜的宽和高
            let fW = this.$('.mask').offsetWidth
            let fH = this.$('.mask').offsetHeight
            //console.log(fW, fH);
            //获取盒子的左和上偏移量
            let sW = this.$('.preview_wrap').offsetLeft
            let sH = this.$('.preview_wrap').offsetTop
            // console.log(sW, sH);
            //计算鼠标的坐标
            let mouse_X = cX - sW
            let mouse_Y = cY - sH
            //console.log(fW, fH);
            //获取小盒子的宽高
            let small_W = this.$('.preview_img').offsetWidth
            let small_H = this.$('.preview_img').offsetHeight
            //console.log(small_W, small_H);
            //限制放大镜的运动范围
            let maxX = small_W - fW
            let maxY = small_H - fH
            //未规定范围前鼠标的坐标
            mouse_X -= fW / 2
            mouse_Y -= fH / 2
            //判断条件
            mouse_X = mouse_X < 0 ? 0 : mouse_X
            mouse_X = mouse_X > maxX ? maxX : mouse_X
            mouse_Y = mouse_Y < 0 ? 0 : mouse_Y
            mouse_Y = mouse_Y > maxY ? maxY : mouse_Y
            //赋值给小盒子
            this.$('.mask').style.left = mouse_X + 'px'
            this.$('.mask').style.top = mouse_Y + 'px'
            //设置大盒子
            //获取照片的宽高
            let img_W = this.$('.bigimg').offsetWidth
            let img_H = this.$('.bigimg').offsetHeight
            //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
            //  img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
            //  3.1 计算img移动的最大距离  img的宽 - big的宽
            let iMaxx = img_W - this.$('.big').offsetWidth
            let iMaxy = img_H - this.$('.big').offsetHeight
            //利用公式求出照片的移动距离
            let imgL = mouse_X / maxX * iMaxx
            let imgT = mouse_Y / maxY * iMaxy
            //把值赋给大照片
            this.$('.bigimg').style.left = -imgL + 'px'
            this.$('.bigimg').style.top = -imgT + 'px'
        }
    }
    //选项
    //定义两个变量
    oldIndex = 0;
    newIndex = 0;
    onCheck() {
        //循环绑定点击事件
        this.$('.list_item li').forEach((v, k) => {
            //console.log(v,k);
            this.$('.list_item li')[k].onclick = this.onC.bind(this, k)
        })
    }
    //点击事件的回调函数
    onC(k) {
        this.oldIndex = this.newIndex;
        this.newIndex = k
        // console.log(this.newIndex);
        document.querySelector('.list_item .current').className = ''
        // console.log(1111);
        let res = this.$('.list_item li');
        res[k].className = 'current'
        let re = this.$('.list_item li')[k].children[0].src
        this.$('.preview_img').children[0].src = re
        this.$('.big').children[0].src = re
    }
    //小选项的左按钮
    leftP() {
        //console.log(1111);
        this.oldIndex = this.newIndex
        //console.log(this.oldIndex);
        if (this.newIndex == 0) {
            this.newIndex = this.$('.list_item li').length - 1
            //console.log(this.newIndex);
        } else {
            this.newIndex--
        }
        this.$('.list_item li')[this.oldIndex].className = ''
        this.$('.list_item li')[this.newIndex].className = 'current'
        let res = this.$('.list_item li')[this.newIndex].children[0].src
        this.$('.preview_img').children[0].src = res
        this.$('.big').children[0].src = res
    }
    //小选项的右按钮
    rightP() {
        this.oldIndex = this.newIndex
        //console.log(this.oldIndex);
        if (this.newIndex == this.$('.list_item li').length - 1) {
            this.newIndex = 0;
            //console.log(this.newIndex);
        } else {
            this.newIndex++
        }
        this.$('.list_item li')[this.oldIndex].className = ''
        this.$('.list_item li')[this.newIndex].className = 'current'
        let res = this.$('.list_item li')[this.newIndex].children[0].src
        this.$('.preview_img').children[0].src = res
        this.$('.big').children[0].src = res
    }







    //获取节点 
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res;
    }
}
new Detail()













var msg = [
    "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
    "不满意|部分有破损，与卖家描述的不符，不满意",
    "一般|质量一般，没有卖家描述的那么好",
    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
];
// 1 获取页面中的节点
let lisObj = document.querySelectorAll('.comment-info li');
let pObj = document.querySelector('.comment-info .xx');
let spanObj = document.querySelector('.comment-info .xxx');
//保存点击的分数
let score = 0;
// 2 循环li绑定事件
lisObj.forEach((li, key) => {
    // console.log(li);
    // 2-1 绑定鼠标移入事件
    // bind(改变this的指向,函数参数1,函数参数2)
    li.onmouseover = overFn.bind(li, key);
    //2-2 绑定点击事件
    li.onclick = clickFn.bind(li, key);
    // 2-3 鼠标移走事件
    li.onmouseout = outFn;
})
function overFn(k) {
    // 3 让p显示.且移动
    pObj.style.display = 'block';
    // console.log(this, k);
    // console.log(this.offsetLeft);
    // 3-1 获取li的坐标设置给p标签
    pObj.style.left = this.offsetLeft - 25 + 'px';
    // 3-2 取出解释语
    // console.log(msg[k]);
    let tmpMsg = msg[k].split('|');
    // console.log(tmpMsg);
    pObj.innerHTML = `<strong>${tmpMsg[0]}</strong><br />${tmpMsg[1]}`;
    // 3-3 调用显示星星的方法
    showLightStar(k + 1)
}
//4 点击事件
function clickFn(k) {
    // console.log(k);
    // console.log(this);
    // 4-1 让p标签消失
    pObj.style.display = 'none';
    // 4-2 显示打分解释语
    let tmpMsg = msg[k].split('|');
    spanObj.innerHTML = `<strong>${tmpMsg[0]}</strong> ${tmpMsg[1]}`;
    // 4-3 保存打的分数
    score = k + 1;
}
// 5 鼠标移走事件
function outFn() {
    // 5-1 让p标签消失
    pObj.style.display = 'none';
    // 5-2 恢复点击的分数
    showLightStar()
}

// 设置星星的高亮显示
function showLightStar(key) {
    let tmpkey = key || score;
    // console.log(key, tmpkey);
    //循环所有的li
    for (let i = 0; i < lisObj.length; i++) {
        lisObj[i].className = i < tmpkey ? 'on' : '';
    }
}